import { Component, createEffect, createSignal } from 'solid-js';
import { useParams } from '@solidjs/router';
import { fetchCategoryApps, useCategoriesStore } from './store';
import AppList from '@/components/AppList';

const Categories: Component = () => {
  const params = useParams();
  const [categoryApps, setCategoryApps] = createSignal<any[]>([]);
  const [loadingApps, setLoadingApps] = createSignal(true);
  const { categories } = useCategoriesStore();

  createEffect(async () => {
    if (params.id) {
      setLoadingApps(true);
      try {
        const apps = await fetchCategoryApps(params.id);
        setCategoryApps(apps);
      } finally {
        setLoadingApps(false);
      }
    }
  });

  return (
    <div class="p-6 w-full h-full">
      <h1 class="text-2xl font-bold mb-6">
        {categories()?.find((category) => category.id === params.id)?.name_zh_cn}
      </h1>
      <AppList
        apps={categoryApps()}
        loading={loadingApps()}
        category={params.id}
      />
    </div>
  );
};

export default Categories;